<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>解答题</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css">
    <script src="jQuery/jquery-3.1.0.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>

    <style>

        .row.content {
            height: 1000px;
        }

        .sidenav {
            background-color: #f1f1f1;
            height: 100%;
        }


        footer {
            background-color: #555;
            color: white;
            padding: 15px;
        }

        @media screen and (max-width: 768px){
            .sidenav {
                height: auto;
                padding: 15px;
            }

            .row.content {
                height: auto;
            }
        }



        .panel-heading p {
            margin: 0;
        }

        .panel-body p {
            margin: 0;
        }



    </style>

</head>
<body>


    <div class="container-fluid">

        <div class="row content">

            <!--左侧边栏-->
            <div class="col-sm-3 sidenav">
                <h4>[您的姓名] 's 答题卡</h4>
                <ul class="nav nav-pills nav-stacked">
                    <li class="active"><a data-toggle="pill" href="#html">HTML</a></li>
                    <li><a data-toggle="pill" href="#css">CSS</a></li>
                    <li><a data-toggle="pill" href="#bootstrap">BootStrap</a></li>
                    <li><a data-toggle="pill" href="#javascript">JavaScript</a></li>
                </ul><br>

            </div>

            <div class="col-sm-9">

                <div class="tab-content">

                <!--HTML-->
                <div id="html" class="tab-pane fade in active">

                    <h2>HTML 主观解答题</h2>
                    <p>根据自己的理解回答下面的问题, 不要抄录书上或者网上的原文</p>

                    <div class="panel-group">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <p>1. 描述HTML服务端和客户端原理.</p>
                            </div>
                            <div class="panel-body">
                                <p>答: HTML客户端向HTML服务器端发出请求.</p>
                            </div>
                        </div>

                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <p>2. HTML 元素和标签的关系</p>
                            </div>

                            <div class="panel-body">
                                <p>答: </p>
                            </div>
                        </div>

                        <div class="panel panel-default">

                        </div>
                    </div>

                </div>

                <!--CSS-->
                <div id="css" class="tab-pane fade">
                    <h2>CSS 主观解答题</h2>
                    <p>根据自己的理解回答下面的问题, 不要抄录书上或者网上的原文</p>
                </div>

                <!--bootstrap-->
                <div id="bootstrap" class="tab-pane fade">
                    <h2>BootStrap 主观解答题</h2>
                    <p>根据自己的理解回答下面的问题, 不要抄录书上或者网上的原文</p>

                </div>

                <!--javascript-->
                <div id="javascript" class="tab-pane fade">
                    <h2>JavaScript 主观解答题</h2>
                    <p>根据自己的理解回答下面的问题, 不要抄录书上或者网上的原文</p>

                </div>

                </div>


            </div>
        </div>
    </div>

</body>
</html>
